<template>
  <div class="course-table">
    <el-table :data="tableData" v-loading="loading" style="width: 100%" :empty-text="$t('common.emptyTxt')">
      <el-table-column prop="name" :label="$t('course.courseName')" min-width="200"  show-overflow-tooltip></el-table-column>
      <!-- <el-table-column prop="subjectCategory" :label="$t('course.subjectCategory')" min-width="120"> </el-table-column> -->
      <el-table-column prop="status" :label="$t('course.courseStatus')" min-width="100">
        <template #default="scope">
          <span class="status-dot" :class="scope.row.status">
            <span class="dot"></span>
            {{ COURSE_STATUS_MAP[scope.row.status as keyof typeof COURSE_STATUS_MAP] }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" :label="$t('common.createTimeTxt')" min-width="110">
        <template #default="scope">
          <span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="lastUpdateTime" :label="$t('common.updateTimeTxt')" min-width="110">
        <template #default="scope">
          <span>{{ dayjs(scope.row.lastUpdateTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('common.operationTxt')" fixed="right">
        <template #default="scope">
          <!-- <div class="flex gap-1"> -->
            <el-tooltip effect="dark" :content="$t('common.editTxt')" :show-after="600" placement="top">
              <span class="edit-btn-wrapper">
                <el-button :icon="Pencil" link @click="handleEdit(scope.row)"></el-button>
                <span v-if="scope.row.hadDraft === HAD_DRAFT_MAP.YES" class="draft-dot"></span>
              </span>
            </el-tooltip>

            <el-tooltip effect="dark"
              :content="scope.row.status === LISTED_STATUS ? UNLISTED_STATUS_LABEL : LISTED_STATUS_LABEL" :show-after="600"
              placement="top">
              <el-button link :icon="scope.row.status === LISTED_STATUS ? Ban : ArchiveRestore" class="ml-4"
                :disabled="scope.row.hadDraft === HAD_DRAFT_MAP.YES" @click="handleToggleStatus(scope.row)">
              </el-button>
            </el-tooltip>

            <el-tooltip effect="dark" :content="$t('common.deleteTxt')" :show-after="600" placement="top">
              <el-button :icon="Trash2" link @click="handleDelete(scope.row)"
                :disabled="scope.row.status === LISTED_STATUS"></el-button>
            </el-tooltip>
          <!-- </div> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { HAD_DRAFT_MAP, type CourseItem } from './types'
import { COURSE_STATUS_MAP, LISTED_STATUS, UNLISTED_STATUS, LISTED_STATUS_LABEL, UNLISTED_STATUS_LABEL } from '#/types/const'
import { Pencil, Ban, ArchiveRestore, Trash2 } from '@vben/icons';
import { watch } from 'vue'
import dayjs from 'dayjs'
import { listedCourseInfoApi, unlistedCourseInfoApi } from '#/api/manage/course'
import { $t } from '@vben/locales';

// 定义Props
interface Props {
  tableData: CourseItem[]
  loading?: boolean
}

withDefaults(defineProps<Props>(), {
  loading: false,
  tableData: () => []
})

interface ToggleStatusPayload {
  row: CourseItem
  newStatus: typeof LISTED_STATUS | typeof UNLISTED_STATUS
  api: typeof listedCourseInfoApi | typeof unlistedCourseInfoApi
  message: string
}

// 定义事件
const emit = defineEmits<{
  edit: [row: CourseItem]
  delete: [row: CourseItem]
  toggleStatus: [payload: ToggleStatusPayload]
}>()

// 编辑处理
const handleEdit = (row: CourseItem) => {
  emit('edit', row)
}

// 删除处理
const handleDelete = (row: CourseItem) => {
  emit('delete', row)
}

// 状态切换处理
const handleToggleStatus = (row: CourseItem) => {
  const newStatus = row.status === LISTED_STATUS ? UNLISTED_STATUS : LISTED_STATUS
  const api = row.status === LISTED_STATUS ? unlistedCourseInfoApi : listedCourseInfoApi
  const message = row.status === LISTED_STATUS
    ? $t('courseMgr.courseOfflineConfirm')
    : $t('courseMgr.courseOnlineConfirm')
  emit('toggleStatus', { row, newStatus, api, message })
}
</script>

<style scoped>
.status-dot {
  display: flex;
  align-items: center;
  font-size: 14px;
  /* font-weight: 500; */
}

.status-dot .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.status-dot.listed .dot {
  background: #30A46C;
}

.status-dot.unlisted .dot {
  background: #FB9A0E;
}
.edit-btn-wrapper {
  position: relative;
  display: inline-block;
}

.draft-dot {
  position: absolute;
  top: 2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #ff3b30;
  border-radius: 50%;
  z-index: 1;
}
</style>
